<template>
  <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="报废物资名称" prop="intoName">
            <el-input
              v-model="queryParams.intoName"
              placeholder="请输入报废物资名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="提交报废物资车间（班组）" prop="intoClass">
            <el-select filterable v-model="queryParams.intoClass" placeholder="提交报废物资车间（班组）" clearable size="small">
              <el-option
                v-for="dict in scrapShiftListAll"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="经办人" prop="operator">
            <el-input
              v-model="queryParams.operator"
              placeholder="请输入经办人"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="保管人" prop="deliverer">
            <el-input
              v-model="queryParams.deliverer"
              placeholder="请输入保管人"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="对应库科库号" prop="intoNo">
            <el-input
              v-model="queryParams.intoNo"
              placeholder="请输入对应库科库号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"
        >新增入库单
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-document"
          size="mini"
          @click="printTable"
        >打印
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!--列表在这里-->
    <el-table v-loading="loading" :data="intoList" @selection-change="handleSelectionChange">
      <el-table-column label="入库信息" align="center">
        <el-table-column label="入库序号" align="center" type="index"/>
        <el-table-column label="入库日期" align="center" prop="intoTime"/>
        <el-table-column label="提交报废物资车间（班组）" align="center" prop="scrapClassName"/>
<!--          <template slot-scope="scope">-->
<!--            {{ getLabelByCode(scope.row.intoClass, scrapShiftList) }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="报废物资名称" align="center" prop="intoName"/>
        <el-table-column label="规格型号" align="center" prop="intoSpec"/>
        <el-table-column label="计量单位" align="center" prop="intoUnit"/>
        <el-table-column label="交付重（数）量" align="center" prop="intoWeight"/>
        <el-table-column label="对应库科库号" align="center" prop="intoNo"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleAdd(scope.row.intoId)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleIntoDetail(scope.row)"
            >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row,'into')"
            >删除
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-truck"
              v-if="scope.row.status!=1"
              @click="handleOut(scope.row)"
            >出库
            </el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="出库信息" align="center">
        <el-table-column label="出库序号" align="center" type="index"/>
        <el-table-column label="出库日期" align="center" prop="outTime"/>
        <el-table-column label="出库汽车牌号" align="center" prop="carNo" width="180"/>
        <el-table-column label="过磅单号（皮重）" align="center" prop="weightTare"/>
        <el-table-column label="报废物资名称" align="center" prop="outName"/>
        <el-table-column label="计量单位" align="center" prop="outUnit"/>
        <el-table-column label="出库重（数）量" align="center" prop="weightOut"/>
        <el-table-column label="过磅单号（总重）" align="center" prop="weightTotal"/>
        <el-table-column label="经办人" align="center" prop="operator"/>
        <el-table-column label="保管人" align="center" prop="deliverer"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              v-if="scope.row.outId"
              @click="handleEditOut(scope.row)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              v-if="scope.row.outId"
              @click="handleOutDetail(scope.row)"
            >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              v-if="scope.row.outId"
              @click="handleDelete(scope.row,'out')"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="期末库存量" align="center" prop="weightEnd">
        <template slot-scope="scope">
          <span>{{ scope.row.intoWeight - scope.row.weightOut }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 隐藏的打印表格 -->
    <div id="printTable" style="display: none;">
      <div style="width: 100%;text-align: center;font-size: 20px;font-weight: 500;margin-bottom: 20px">报废物资回收入（出）库台账
      </div>
      <el-table :data="intoList">
        <el-table-column label="入库信息" align="center">
          <el-table-column label="入库序号" align="center" type="index" width="43px"/>
          <el-table-column label="入库日期" align="center" prop="intoTime" width="55px"/>
          <el-table-column label="提交报废物资车间（班组）" align="center" prop="scrapClassName" width="60px"/>
<!--            <template slot-scope="scope">-->
<!--              {{ getLabelByCode(scope.row.intoClass, scrapShiftList) }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="报废物资名称" align="center" prop="intoName" width="55px"/>
          <el-table-column label="规格型号" align="center" prop="intoSpec" width="50px"/>
          <el-table-column label="计量单位" align="center" prop="intoUnit" width="50px"/>
          <el-table-column label="交付重（数）量" align="center" prop="intoWeight" width="60px"/>
          <el-table-column label="对应库科库号" align="center" prop="intoNo" width="60px"/>
        </el-table-column>
        <el-table-column label="出库信息" align="center">
          <el-table-column label="出库序号" align="center" type="index" width="42px"/>
          <el-table-column label="出库日期" align="center" prop="outTime" width="55px"/>
          <el-table-column label="出库汽车牌号" align="center" prop="carNo" width="60px"/>
          <el-table-column label="过磅单号（皮重）" align="center" prop="weightTare" width="60px"/>
          <el-table-column label="报废物资名称" align="center" prop="outName" width="55px"/>
          <el-table-column label="计量单位" align="center" prop="outUnit" width="50px"/>
          <el-table-column label="出库重（数）量" align="center" prop="weightOut" width="60px"/>
          <el-table-column label="过磅单号（总重）" align="center" prop="weightTotal" width="60px"/>
          <el-table-column label="经办人" align="center" prop="operator" width="60px"/>
          <el-table-column label="保管人" align="center" prop="deliverer" width="60px"/>
        </el-table-column>
        <el-table-column label="期末库存量" align="center" prop="weightEnd" width="50.9px" :style="{borderRight: '0px'}">
          <template slot-scope="scope">
            <span>{{ scope.row.intoWeight - scope.row.weightOut }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加或修改入库台账对话框 -->
    <el-dialog :title="title" :visible.sync="openIntoDialog" width="900px">
      <el-form class="scform" ref="form" :model="form" :rules="rules" label-width="150px" label-position="left"
               style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap"
      >
        <el-form-item label="入库时间" prop="intoTime">
          <el-date-picker
            v-model="form.intoTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报废物资名称" prop="intoName">
          <el-input v-model="form.intoName" placeholder="请输入报废物资名称" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="请选择物资分类" prop="fenlei">
          <el-select filterable  value-key="name" reserve-keyword remote :remote-method="handleInput" v-model="form.fenlei" placeholder="物资分类" clearable size="small">
            <el-option
              v-for="dict in scrapNotesList"
              :key="dict.name"
              :label="dict.name"
              :value="dict.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号" prop="intoSpec">
          <el-input v-model="form.intoSpec" placeholder="请输入规格型号" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="计量单位" prop="intoUnit">
          <el-input v-model="form.intoUnit" placeholder="请输入计量单位" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="交付重（数）量" prop="intoWeight" :required="isWeightRequired">
          <el-input-number  v-model="form.intoWeight" controls-position="right" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="对应库料库号" prop="intoNo">
          <el-input v-model="form.intoNo" placeholder="请输入对应库料库号" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="报废物资车间" prop="intoClass">
          <el-select v-model="form.intoClass" placeholder="报废物资车间" clearable size="small">
            <el-option
              v-for="dict in scrapShiftList"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联废旧物资处置申请单" prop="applyId">
          <el-select v-model="form.applyId" placeholder="关联废旧物资处置申请单" clearable size="small">
            <el-option
              v-for="dict in applyList"
              :key="dict.applyId"
              :label="dict.applyId"
              :value="dict.applyId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="addLoading">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--入库详情&&新增出库-->
    <el-dialog
      width="805px"
      :close-on-click-modal="false"
      :title="intoDetailTitle"
      :visible.sync="showDialog"
    >
      <!--      入库信息-->
      <div class="detail">
        <div style="font-width: 600;width: 100%">入库信息</div>
        <div class="itm">入库时间： {{ intoInfoDetail.intoTime }}</div>
        <div class="itm">报废物资名称： {{ intoInfoDetail.intoName }}</div>
        <div class="itm">规格型号： {{ intoInfoDetail.intoSpec }}</div>
        <div class="itm">计量单位： {{ intoInfoDetail.intoUnit }}</div>
        <div class="itm">交付重（数）量： {{ intoInfoDetail.intoWeight }}</div>
        <div class="itm">对应原料库号： {{ intoInfoDetail.intoNo }}</div>
        <div class="itm">报废物资车间： {{ getLabelByCode(intoInfoDetail.intoClass, scrapShiftListAll) }}</div>
      </div>
      <!--      出库信息详情-->
      <div class="detail" v-if="outDetailDialog">
        <div style="font-width: 600;width: 100%">出库信息</div>
        <div class="itm">出库时间： {{ outInfoDetail.outTime }}</div>
        <div class="itm">出库汽车牌号： {{ outInfoDetail.carNo }}</div>
        <div class="itm">过磅单号（皮重）： {{ outInfoDetail.weightTare }}</div>
        <div class="itm">报废物资名称： {{ outInfoDetail.outName }}</div>
        <div class="itm">计量单位： {{ outInfoDetail.outUnit }}</div>
        <div class="itm">出库重（数）量： {{ outInfoDetail.weightOut }}</div>
        <div class="itm">过磅单号（总重）： {{ outInfoDetail.weightTotal }}</div>
        <div class="itm">经办人： {{ outInfoDetail.operator }}</div>
        <div class="itm">保管人： {{ outInfoDetail.deliverer }}</div>
      </div>
      <!--      新增出库的在这-->
      <el-form v-if="!outDetailDialog && !detailDialog" class="scform" ref="outForm" :model="outForm" :rules="outRules"
               label-width="140px" label-position="left"
               style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap"
      >
        <el-form-item label="出库时间" prop="outTime">
          <el-date-picker
            v-model="outForm.outTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报废物资名称" prop="outName">
          <el-input v-model="outForm.outName" placeholder="请输入报废物资名称" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="请选择物资分类" prop="fenlei">
          <el-select filterable  value-key="name" reserve-keyword remote :remote-method="handleInput" v-model="outForm.fenlei" placeholder="物资分类" clearable size="small">
            <el-option
              v-for="dict in scrapNotesList"
              :key="dict.name"
              :label="dict.name"
              :value="dict.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计量单位" prop="outUnit">
          <el-input v-model="outForm.outUnit" placeholder="请输入计量单位" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="过磅单号（皮重）" prop="weightTare"  :required="isWeightRequired">
          <el-input-number v-model="outForm.weightTare" placeholder="请输入过磅单号（皮重）" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="出库重（数）量" prop="weightOut" :required="isWeightRequired">
          <el-input-number v-model="outForm.weightOut" controls-position="right" :min="0" :step="1"
                           style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="过磅单号（总重）" prop="weightTotal" :required="isWeightRequired">
          <el-input disabled v-model="weightTotal" placeholder="总重=皮重+出库重（数）量" style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="汽车牌号" prop="carNo">
          <el-input v-model="outForm.carNo" placeholder="请输入汽车牌号" style="width: 200px"/>
        </el-form-item>
        <!--        <el-form-item label="期末库存量" prop="intoSpec">-->
        <!--          <el-input v-model="outForm.intoSpec" placeholder="请输入期末库存量" style="width: 200px"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="经办人" prop="operator">
          <el-input v-model="outForm.operator" placeholder="请输入经办人" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="保管人" prop="deliverer">
          <el-input v-model="outForm.deliverer" placeholder="请输入保管人" style="width: 200px"/>
          <!--          <el-select v-model="outForm.deliverer" placeholder="请选择保管人" clearable size="small">-->
<!--            <el-option-->
<!--              v-for="dict in delivererList"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            />-->
<!--          </el-select>-->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="detailDialog || outDetailDialog" type="primary" @click="detailSubmit">确定</el-button>
        <el-button v-if="outDialog" type="primary" @click="submitOutForm" :loading="submitLoading">提 交</el-button>
        <el-button v-if="outDialog" @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listApply,
  listInto,
  intoInfo,
  outInfo,
  delPost,
  scrapInto,
  scrapOut,
  auditorList,
  removeInto,
  removeOut
} from '@/api/system/scrap'
import { listData ,scrapNotes} from '@/api/system/dict/data'
import Cookies from 'js-cookie'

export default {
  name: 'Post',
  dicts: ['sys_normal_disable'],
  data() {
    return {
      totalWeight: '',
      applyList: [],
      addLoading: false,
      applyTitle: '填写报废物资处置申请单',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      sourceList: [{
        value: '日常维修'
      }, {
        value: '技改大修'
      }],
      disposeList: [{
        value: '修旧利废'
      }, {
        value: '开发创效'
      }, {
        value: '报废'
      }],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectedRecords: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      intoList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      openIntoDialog: false,
      // 是否显示弹出层
      applyDialog: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        receiver: undefined,
        deliverer: undefined,
        warehouse: undefined,
        source: undefined,
        goodsName: undefined,
        dispose: undefined
      },
      // 表单参数
      form: {fenlei: ''},
      outForm: {},
      applyForm: {},
      // 申请单表单校验
      applyRules: {
        nextAudit: [
          { required: true, message: '审批人不能为空', trigger: 'blur' }
        ],
        workTel: [
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ],
        applyTime: [
          { required: true, message: '送报时间不能为空', trigger: 'blur' }
        ]
      },
      auditList: [],
      submitLoading: false,
      // 表单校验
      rules: {
        intoTime: [
          { required: true, message: '入库时间不能为空', trigger: 'blur' }
        ],
        intoName: [
          { required: true, message: '报废物资名称不能为空', trigger: 'blur' }
        ],
        intoSpec: [
          { required: true, message: '规格型号不能为空', trigger: 'blur' }
        ],
        intoWeight: [
          { required: false, message: '交付重（数）量不能为空', trigger: 'blur' }
        ],
        fenlei: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ],
        intoUnit: [
          { required: true, message: '计量单位不能为空', trigger: 'blur' }
        ],
        intoClass: [
          { required: true, message: '报废物资车间不能为空', trigger: 'blur' }
        ],
        applyId: [
          { required: true, message: '废旧物资处置申请单不能为空', trigger: 'blur' }
        ]
      },
      outRules: {
        outTime: [
          { required: true, message: '出库时间不能为空', trigger: 'blur' }
        ],
        weightTare: [
          { required: false, message: '过磅单号（皮重）不能为空', trigger: 'blur' }
        ],
        fenlei: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ],
        outName: [
          { required: true, message: '报废物资名称不能为空', trigger: 'blur' }
        ],
        outUnit: [
          { required: true, message: '计量单位不能为空', trigger: 'blur' }
        ],
        weightOut: [
          { required: false, message: '出库重（数）量不能为空', trigger: 'blur' }
        ],
        weightTotal: [
          { required: false, message: '过磅单号（总重）不能为空', trigger: 'blur' }
        ],
        operator: [
          { required: true, message: '经办人不能为空', trigger: 'blur' }
        ],
        deliverer: [
          { required: true, message: '保管人不能为空', trigger: 'blur' }
        ]
      },
      isWeightRequired: false,
      scrapShiftList: [],
      scrapShiftListAll: [],
      scrapNotesList: [],
      delivererList: [],
      operatorList: [],
      receiverList: [],
      applyId: '',
      intoInfoDetail: {},
      detailDialog: false,
      intoDetailTitle: '',
      outDialog: false,
      outInfoDetail: {},
      outDetailTitle: '',
      outDetailDialog: false
    }
  },
  created() {
    this.getList()
  },

  methods: {

    handleInput(value) {
      // 在这里可以处理用户的输入，例如发送请求获取匹配的数据
      console.log('User input:', value);
      // 物资是否必填
      scrapNotes(value).then(response => {
        this.scrapNotesList = response.data
      })
    },
    getLabelByCode(code, list) {
      console.log(code)
      console.log(list)
      const foundLabel = list.find(item => item.dictValue == code)
      return foundLabel ? foundLabel.dictLabel : '未知'
    },
    //打印页面内容
    printTable() {
      // 显示隐藏的表格，用于打印
      document.getElementById('printTable').style.display = 'block'

      // 强制重新渲染，确保表格样式正确
      this.$nextTick(() => {
        let wpt = document.querySelector('#printTable')
        let newContent = wpt.innerHTML
        let oldContent = document.body.innerHTML
        document.body.innerHTML = newContent
        // 调用浏览器的打印功能
        window.print()
        history.go(0)
        document.body.innerHTML = oldContent
        // 打印完成后隐藏表格
        setTimeout(() => {
          document.getElementById('printTable').style.display = 'none'
        }, 500)
      })
    },
    validateField(row) {
      if (!row.unitPrice || !row.place || !row.idea) {
        this.$message.error('单价、提货地点、科室意见是必填项')
        return false
      } else {
        // 如果有错误状态，这里可以清除错误提示
        return true
      }
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      // 班次车间
      const deptId = Cookies.get('deptId')
      // 班次车间
      listData({ dictType: 'scrap_shift',deptId:deptId }).then(response => {
        this.scrapShiftList = response.data
      })
      // 保管人
      listData({ dictType: 'deliverer' }).then(response => {
        this.delivererList = response.rows
      })
      // 物资是否必填
      scrapNotes().then(response => {
        this.scrapNotesList = response.data
      })
      // 收料人
      listData({ dictType: 'receiver' }).then(response => {
        this.receiverList = response.rows
      })
      // 申请单
      listApply({ auditStatus: 1 }).then(response => {
        this.applyList = response.rows
      })
      listData({ dictType: 'scrap_shift'}).then(res=> {
        this.scrapShiftListAll = res.rows
        listInto(this.queryParams).then(response => {
          const rows=response.rows
          let newArray = rows.map(item => {
            console.log(item);
            item.scrapClassName = this.getLabelByCode(item.intoClass, res.rows);
            console.log(item);
            return item; // 例子中返回每个元素的两倍
          });
          this.intoList = newArray
          this.total = response.total
          this.loading = false
        })
      })
    },
    // 查询审核人列表
    getAuditList() {
      auditorList({ applyId: this.applyId }).then(response => {
        this.auditList = response.data
      })
    },
    // 取消按钮
    cancel() {
      this.openIntoDialog = false
      this.outDialog = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {}
      this.applyForm = {}
      this.resetForm('form')
      this.resetForm('outForm')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection)
      this.ids = selection.map(item => item.postId)
      this.selectedRecords = selection
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      this.reset()
      this.title = '报废物资回收入库台账填报'
      if (id) {
        // 获取入库单详情设定默认值
        intoInfo({ id: id }).then(response => {
          this.form = response.data
          this.form.id = id
          this.title = '修改报废物资回收入库台账'
        })
      }
      this.openIntoDialog = true
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const postId = row.postId || this.ids
      getPost(postId).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改岗位'
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.form.id != undefined) {
            scrapInto(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.openIntoDialog = false
              this.getList()
            })
          } else {
            scrapInto(this.form).then(response => {
              console.log(this.form)
              this.$modal.msgSuccess('新增成功')
              this.openIntoDialog = false
              this.getList()
            })
          }
          this.loading = false
        }
      })
    },
    submitOutForm: function() {
      console.log(this.outForm)
      this.$refs['outForm'].validate(valid => {
        if (valid) {
          if(this.isWeightRequired){
            if (this.outForm.weightOut > this.intoInfoDetail.intoWeight) {
              this.$modal.msgError('出库重量不能大于入库重量')
              return false
            }
          }
          this.submitLoading = true
          if (this.outForm.id != undefined) {
            scrapOut(this.outForm).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.outDialog = false
              this.getList()
            })
          } else {
            scrapOut(this.outForm).then(response => {
              console.log(this.outForm)
              this.$modal.msgSuccess('新增成功')
              this.outDialog = false
              this.getList()
            })
          }
        }
      })
      this.outForm = {}
      this.submitLoading = false
    },
    detailSubmit() {
      this.detailDialog = false
      this.outDetailDialog = false
    },
    // 填写申请单
    handleApply() {
      this.applyDialog = true
      this.getAuditList()
    },
    handleOut(row) {
      intoInfo({ id: row.intoId }).then(response => {
        this.intoInfoDetail = response.data
      })
      this.outForm.intoId = row.intoId
      this.intoDetailTitle = '新增报废物资回收出库台账'
      this.outDialog = true
    },
    handleEditOut(row) {
      this.outForm.id = row.outId
      outInfo({ id: row.outId }).then(response => {
        this.outForm = response.data
      })
      intoInfo({ id: row.intoId }).then(response => {
        this.intoInfoDetail = response.data
      })
      this.intoDetailTitle = '修改报废物资回收出库台账'
      this.outDialog = true
    },
    /** 删除按钮操作 */
    handleDelete(row, type) {
      console.log(type)
      if (type == 'into') {
        const postIds = row.intoId || this.ids
        this.$modal.confirm('是否确认删除入库单id为"' + postIds + '"的数据项？').then(function() {
          return removeInto({ ids: postIds })
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {
        })
      } else {
        const postIds = row.outId || this.ids
        this.$modal.confirm('是否确认删除出库单id为"' + postIds + '"的数据项？').then(function() {
          return removeOut({ ids: postIds })
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {
        })
      }

    },
    // 详情
    handleIntoDetail(row) {
      intoInfo({ id: row.intoId }).then(response => {
        this.intoInfoDetail = response.data
      })
      this.intoDetailTitle = '报废物资回收入（出）库台账详情'
      this.detailDialog = true
    },
    handleOutDetail(row) {
      intoInfo({ id: row.intoId }).then(response => {
        this.intoInfoDetail = response.data
      })
      outInfo({ id: row.outId }).then(response => {
        this.outInfoDetail = response.data
      })
      this.intoDetailTitle = '报废物资回收入（出）库台账详情'
      this.outDetailDialog = true
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/scrap/into/export', {
        ...this.queryParams
      }, `报废物资出入库台账${new Date().getTime()}.xlsx`)
    }
  },

  watch: {
    weightTotal(newVal) {
      const outForm = this.outForm
      outForm.weightTotal = newVal
      this.outForm = outForm
    } ,
    'form.fenlei'(newVal, oldVal) {
      console.log(`物资分类从 ${oldVal} 变为 ${newVal}`);
      // 在这里执行你想在fenlei变化时进行的操作
      const matchedDict = this.scrapNotesList.find(dict => dict.name == newVal);
      this.isWeightRequired = matchedDict.status == 1
    } ,
    'outForm.fenlei'(newVal, oldVal) {
      console.log(`物资分类从 ${oldVal} 变为 ${newVal}`);
      // 在这里执行你想在fenlei变化时进行的操作
      const matchedDict = this.scrapNotesList.find(dict => dict.name == newVal);
      this.isWeightRequired = matchedDict.status == 1
    }
  },
  computed: {
    weightTotal() {
      return this.outForm.weightTare + this.outForm.weightOut
    },
    // 计算两个周期值
    showDialog: function() {
      return this.detailDialog || this.outDialog || this.outDetailDialog
    }
  }
}
</script>
<style scoped lang="scss">
.scform {
  .el-form-item {
    width: 50%;
  }
}

.detail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .itm {
    width: 50%;
    margin-bottom: 10px;
  }
}

.sign-canvas {
  display: flex;
  flex-direction: row;
  width: 100%;
}

@media print {
  .el-table {
    border: 1px solid #ccc; /* 应用表格边框 */
  }
  .el-table td, .el-table th {
    padding: 2px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }
  @page {
    size: landscape;
    @top-center {
      content: "";
    }
    @bottom-center {
      content: "";
    }
    @top-right {
      content: "";
    }
    @bottom-left {
      content: "";
    }
    @bottom-right {
      content: "";
    }
  }
  .el-table__header-wrapper,
  .el-table__body-wrapper {
    //width: 100%;
  }

  .el-table th, .el-table td {
    white-space: nowrap;
    text-align: center;
    border: 1px solid #ddd !important; /* 使用 !important 提高优先级 */
  }
  header, footer, nav, aside, details {
    display: none;
  }

}
</style>
